<template>
  <div class="coupon">
    <div class="nav-top">
      <NavTopReturn title="我的优惠卷"></NavTopReturn>
    </div>
    <div class="nav-item">
      <van-tabs v-model="activeName">
        <van-tab title="未使用" name="a">
          <van-empty
            class="custom-image"
            image="	https://p1.qhimg.com/t015ec667f00490ab8f.png"
            description="您目前没有未使用的优惠卷！"
          />
        </van-tab>
        <van-tab title="已使用" name="b">
          <van-empty
            class="custom-image"
            image="	https://p1.qhimg.com/t015ec667f00490ab8f.png"
            description="您目前没有已使用的优惠卷！"
          />
        </van-tab>
        <van-tab title="已过期" name="c">
            <van-empty
            class="custom-image"
            image="	https://p1.qhimg.com/t015ec667f00490ab8f.png"
            description="您目前没有已过期的优惠卷！"
          />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import NavTopReturn from "../components/NavTopReturn.vue";

export default {
  name: "Coupon",
  components: {
    NavTopReturn,
  },
  data() {
    return {
      activeName: 0,
    };
  },
};
</script>

<style lang="scss" scoped>
.coupon {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #f6f6f7;
}
</style>